<template>
    <div class="command">
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="No" label="#" width="85" align="center">
        </el-table-column>
        <el-table-column label="id" v-if="hide" prop="id"></el-table-column>
        <el-table-column label="user_id" v-if="hide" prop="user_id"></el-table-column>
        <el-table-column label="动作码"  prop="action" width="85"> 
             <template slot-scope="scope">
                <el-popover trigger="hover" placement="right-start">
                <p>ID:   {{ scope.row.id }}</p>
                <p>动作码:   {{ scope.row.action }}</p>
                <p>名称: {{ scope.row.name }}</p>
                <p>类型: {{ scope.row.type == 0 ? '说话' : '切换界面'  }}</p>
                <p>描述: {{ scope.row.content }}</p>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.action }}</el-tag>
                </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="动作名称"  prop="name"> </el-table-column>
        <el-table-column label="动作描述"  prop="content"  v-if="hide"> </el-table-column>
        <el-table-column label="动作类型"  prop="type"  v-if="hide"> </el-table-column>
        <el-table-column align="right">
            <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit-outline"
                @click="handleEdit(scope.row)">编辑</el-button>
                <el-button  size="mini" type="danger" icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
      <el-pagination layout="prev, pager, next" :page-size="5" :total="total" @current-change="handleCurrentChange">
  </el-pagination>
    <!-- 修改动作指令form -->
    <el-dialog title="编辑动作指令" :visible.sync="editFormVisibe" width="30%">
         <el-form :model="editForm"  ref="editForm" label-width="80px">
            <el-form-item prop="action" label="动作码" :rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="editForm.action"  placeholder="请输入动作码"></el-input>
            </el-form-item>
            <el-form-item prop="name" label="动作指令" :rules="[{required: true, message: '请完善信息'}]">
                <el-input v-model="editForm.name"  placeholder="请输入动作指令"></el-input>
            </el-form-item>
            <el-form-item prop="type" label="动作类型" :rules="[{required: true, message: '请选择'}]">
                <el-select v-model="editForm.type" placeholder="请选择">
                    <el-option
                        v-for="item in actionOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                </el-select>
            </el-form-item>
          <div>
              <el-form-item prop="content" label="描述" :rules="[{
                  required: true, message: '描述不能为空'
              }]">
                  <el-input v-model="editForm.content" type="textarea"></el-input>
              </el-form-item>
          </div>
      </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('editForm')">重 置</el-button>
            <el-button type="primary" @click="editSubmitForm('editForm')">确 定</el-button>
        </div>
    </el-dialog>
    
    </div>
</template>

<script>
export default {
    name:'command',
    data() {
      return {
        tableData: [],
        hide:false,
        total:0,
        pagenumber:1,
        editFormVisibe:false,
        detailFormVisible:false,
       
        editForm:{
            id:'',
            name:'',
            action:'',
            content:'',
            type:'',
        },
        actionOptions:[{
            value:'0',
            label:'说话'
        },{
            value:'1',
            label:'切换界面'
        }],
        formLabelWidth:'80px'
      }
    },
    created: function() {
        this.getTableData();
    },
    methods: {
      handleEdit(row) {
        console.log(row)
        this.editFormVisibe = true;
        this.editForm.id = row.id;
        this.editForm.user_id = row.user_id;
        this.editForm.name = row.name;
        this.editForm.type = row.type;
        this.editForm.action = row.action,
        this.editForm.content = row.content;
        console.log(this.editForm)
      },
      
      // 提交修改内容
      editSubmitForm(formName){
          this.$refs[formName].validate(valid=>{
            if(valid){
                var _this = this;
                // var jsonWith = JSON.stringify(_this.editForm.moreNotifyObject);
                PUT(
                    urlApi+'action/'+_this.editForm.id,
                    {
                         user_id:_this.editForm.user_id,
                         name:_this.editForm.name,
                         type:_this.editForm.type,
                         action:_this.editForm.action,
                         content:_this.editForm.content   
                    },function(json){
                        if(json.code == 200){
                        _this.$message.success('修改成功');
                        _this.editFormVisibe = false;
                        _this.getTableData();
                        } else {
                        _this.$message.error(json.message);
                        }
                        
                    },function(err){
                        _this.$message.error("服务器错误");
                    }
                )
            }
          });  

      },
      // 删除
      handleDelete(row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          var _this = this;
          DELETE(
            urlApi + "action/" + row.id,
            {},
            function(json) {
              
              if (json.code == 200) {
                _this.$message.success('删除成功');
                _this.getTableData();
              } else {
                _this.$message.error(json.msg);
              }
            },
            function(err) {
              _this.$message.error("服务器错误！");
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },

      getTableData(){
          var _this = this;
          GET(
              urlApi + 'action',
              {
                "page": _this.pagenumber,
                "num":5
              },function(json){
                  if(json.code == 200){
                      _this.total = json.total;
                      _this.tableData = [];
                     var data = json.data;
                     console.log(data);
                     if(data != null){
                        for(var i=0;i<data.length;i++){
                            var item = {};
                            item.No = i + 1;
                            item.id = data[i]['id'];
                            item.user_id = data[i]['user_id'];
                            item.action = data[i]['action'];
                            item.name = data[i]['name'];
                            item.type = data[i]['type'];
                            item.content = data[i]['content'];
                            _this.tableData.push(item);
                        } 
                     }
                      
                     
                  }
                //   console.log(json)
              },
              function(err){
                //   console.log(err);
                   _this.$message.error("服务器错误！");
              }
          )
      },
      //   表单重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //   分页
      handleCurrentChange(val) {
        this.pagenumber = val;
        this.getTableData();
    },
    }
  
}
</script>
